<template>
	<view class="changeNumber">
		<view style="width: 50px;text-align: center" @tap="desc">
			<image  src="https://www.zztengma.com/lihu/bumang/images/desc.png"></image>
		</view>
		
		<view class="input">
			 <tn-input v-model="number" type="number" :clearable="false" inputAlign="center" @blur="changeNum" />
		</view>
		<view style="width: 50px;text-align: center" @tap="inc">
			<image  src="https://www.zztengma.com/lihu/bumang/images/inc.png"></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"change-number",
		data() {
			return {
				number:1
			};
		},
		
		methods:{
			desc(){
				this.number = (this.number - 1) < 1 ? 1 : (this.number - 1) 
				this.forceNumber()
			},
			inc(){
				this.number += 1
				this.forceNumber()
			},
			changeNum(num){
				var _num = isNaN(num * 1) ? 1 :   num * 1
				this.number = Math.max(1, _num)
				this.forceNumber()
			},
			forceNumber(){
				this.$emit("forceNumber", this.number)
			}
		}
	}
</script>

<style lang="scss">
.changeNumber{
	width: 110rpx;
	display: flex;
	justify-content: space-between;
	    align-items: center;
	    height: 40px;
	    line-height: 40px;

	image{
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
	}
	.input{
		width: 60rpx;
		text-align: center;
		font-size: 18rpx;
		color: $tn-main-orange;
		
		input{
			position: relative;
			font-size: 30rpx;
		}
		
	}
}
</style>